<template>
  <div class="one">
    <div class="one-box">
      <div class="box">
        <div><iconEarth class="icon"></iconEarth></div>
        <div style="margin: 0 0 0 5px;">English</div>
      </div>
      <div class="box" @click="go('/store/location')">
        <div><iconLocation class="icon"></iconLocation></div>
        <div style="margin: 0 0 0 5px;">Locations</div>
      </div>
      <div class="box" @click="go('/store/support')">
        <div><iconPhone class="icon"></iconPhone></div>
        <div style="margin: 0 0 0 5px;">Support</div>
      </div>
      <div class="box">
        <div><iconWalk class="icon"></iconWalk></div>
        <div style="margin: 0 0 0 5px;">Informed delivery</div>
      </div>
      <div class="box">
        <!-- <div><iconEarth class="icon"></iconEarth></div> -->
        <div style="margin: 0 0 0 5px;" @click="go('/login')">Register/Sign In</div>
      </div>
    </div>
  </div>
  
  <div class="two">
    <div class="two-box">
      <div class="logo"><logo class="img"></logo></div>
        
      <div style="width: 150px;background-color: #333366;color: #ffffff;">
        
        <el-dropdown placement="bottom" style="width: 100%;">
          <el-button class="two2" style="width: 100%;"> Quick Tools </el-button>
          <template #dropdown>
            <el-dropdown-menu>
<div class="Quick_Tools">  
    <ul>  
        <li>  
          <a href=""><img src="../../assets/icon/tracking.svg" alt="">Quick Tools</a>  
          <a href=""><img src="../../assets/icon/schedule-pickup.svg" alt="">Quick Tools</a>
          <a href=""><img src="../../assets\icon\QuickTools\change_address.svg" alt="">Quick Tools</a>  
        </li>  
        <li>  
            <a href=""><img src="../../assets\icon\QuickTools\mailman.svg" alt="">Quick Tools</a>  
            <a href=""><img src="../../assets\icon\QuickTools\calculate_price.svg" alt="">Quick Tools</a>  
            <a href=""><img src="../../assets\icon\QuickTools\po_box.svg" alt="">Quick Tools</a>  
      
        </li>  
      <li>
        <a href=""><img src="../../assets\icon\QuickTools\location.svg" alt="">Quick Tools</a>  
        <a href=""><img src="../../assets\icon\QuickTools\find_zip.svg" alt="">Quick Tools</a>  
        <a href=""><img src="../../assets\icon\QuickTools\free_boxes.svg" alt="">Quick Tools</a>  
      </li>
      <li>
         <a href=""><img src="../../assets\icon\QuickTools\stamps.svg" alt="">Quick Tools</a>  
          <a href=""><img src="../../assets\icon\QuickTools\holdmail.svg" alt="">Quick Tools</a>  
          <a href=""><img src="../../assets\icon\QuickTools\featured_clicknship.svg" alt="">Quick Tools</a>  
      </li>
    </ul>  
</div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
          </div>

      <div style="height: 100%;width: 5px;background-color: red;"></div>

      <div >
        <el-dropdown placement="bottom"style="width: 100%;">
          <el-button class="svg" @click="go('/store/send')"> Send </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <div class="send"style="width: 800px;height: 660px;">
                <li>
                  <a href="">Tools</a>
                  <a href=""><img src="../../assets/icon/click-n-ship.svg" alt="">Click-N-Ship</a>
                  <a href=""><img src="../../assets/icon/stamps.svg" alt="">Stamps & Supplies</a>
                  <a href=""><img src="../../assets/icon/find_zip.svg" alt="">Look Up a ZIP Code ™</a>
                  <a href=""><img src="../../../public/calculate_price.svg" alt="">Calacute a Price</a>
                  <a href=""><img src="../../assets/icon/schedule-pickup.svg" alt="">Schedule a Pickup</a>
                  <a href=""><img src="../../assets/icon/location.svg" alt="">Find USPS Localtions</a>
                  <a href=""><img src="../../assets/icon/tracking.svg" alt="">Tracking</a>
                </li>
                <li>
                  <a href="">Learn About</a>
                  <a href="">Sending
                    <p>Sending Mall</p>
                    <p>Sending Packages</p>
                    <p>Insurace & Extra Services</p>
                    <p>Shiping Restrictions</p>
                  </a>
                  <a href="">Online Shipping
                    <p>Ship to USPS Smart Locker</p>
                    <p>Label Broker</p>
                  </a>
                  <a href="">Custom Mail, Cards, & Envelopes</a>
                  <a href="">Postage Prices</a>
                </li>
                <li>
                  <a href="" style="border-bottom:none;">&nbsp</a>
                  <a href="">Mall & Shiping Services
                    <p>priority mail Express</p>
                    <p>priority mail</p>
                    <p>USPS Ground Advantage</p>
                    <p>First-Class Mall</p>
                    <p>Millitary & Diplomatic Mali</p>
                  </a>
                  <a href="">Redirecting a Package</a>
                  <a href="">Money Orders</a>
                  <a href="">filing a Claim</a>
                  <a href="">Requesting a Refund</a>
                  <img src="../../assets/image/go-now.png" alt="" style="width: 250px;height: 140px;">
                </li>
                <input type="text" value="Search or Enter a Tracking Number">
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div>
        <el-dropdown placement="bottom"style="width: 100%;">
          <el-button class="svg" @click="go('/store/receive')"> Receive </el-button>
          <template #dropdown>
            <el-dropdown-menu>
                 <div class="receive"style="width: 600px;height: 550px;">
                <li class="receive-li">
                  <a href="">Tools</a>
                  <a href=""><img src="../../assets/icon/tracking.svg" alt="">Tracking</a>
                  <a href=""><img src="../../assets/icon/mailman.svg" alt="">Informed Delivery</a>
                  <a href=""><img src="../../assets/icon/calculate-price.svg" alt="">Intercept a Package</a>
                  <a href=""><img src="../../assets/icon/click-n-ship.svg" alt="">Schedule a Redelivery</a>
                  <a href=""><img src="../../assets/icon/holdmail.svg" alt="">Hold Mail</a>
                  <a href=""><img src="../../assets/icon/expand-icon.svg" alt="">Change of Address</a>
                  <a href=""><img src="../../assets/icon/po_box.svg" alt="">Rent or Renew PO Box</a>
                </li>

                <li>
                  <a href="" style="margin-top: 32px;">Learn About</a>
                  <a href="">Sending</a>
                  <a href="">Online Shipping</a>
                  <a href="">Custom Mail, Cards, & Envelopes</a>
                  <a href="">Postage Prices</a>
                  <a href="">Mall & Shiping Services</a>
                  <a href="">Redirecting a Package</a>
                  <a href="">Money Orders</a>
                  <a href="">filing a Claim</a>
                  <a href="">Requesting a Refund</a>
                  <img src="../../assets/image/go-now (1).png" alt="" style="width: 200px;height: 170px;">
                </li>
                <input type="text" value="Search or Enter a Tracking Number">
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div>
        <el-dropdown placement="bottom"style="width: 100%;">
          <el-button class="svg" @click="go('/store/shop')"> Shop </el-button>
          <template #dropdown>
            <el-dropdown-menu>
                <div class="receive"style="width: 600px;height: 555px !important;">
                  <li class="receive-li">
                  <a href="">Tools</a>
                  <a href=""><img src="../../assets/icon/tracking.svg" alt="">Tracking</a>
                  <a href=""><img src="../../assets/icon/mailman.svg" alt="">Informed Delivery</a>
                  <a href=""><img src="../../assets/icon/calculate-price.svg" alt="">Intercept a Package</a>
                  <a href=""><img src="../../assets/icon/click-n-ship.svg" alt="">Schedule a Redelivery</a>
                  <a href=""><img src="../../assets/icon/holdmail.svg" alt="">Hold Mail</a>
                  <a href=""><img src="../../assets/icon/expand-icon.svg" alt="">Change of Address</a>
                  <a href=""><img src="../../assets/icon/po_box.svg" alt="">Rent or Renew PO Box</a>
                </li>
                <li>
                  <a href="" style="margin-top: 32px;">Learn About</a>
                  <a href="">Sending</a>
                  <a href="">Online Shipping</a>
                  <img src="../../assets/image/go-now (2).png" alt="" style="width: 200px;height: 170px;">
                </li>
                <input type="text" value="Search or Enter a Tracking Number" style="margin-top: 0px;">
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div>
        <el-dropdown placement="bottom"style="width: 100%;">
          <el-button class="svg" @click="go('/store/business')"> Business </el-button>
          <template #dropdown>
            <el-dropdown-menu>
               <div class="two1-div"style="width: 720px;height: 450px ;">
                <li>
                  <a href="">Tools</a>
                  <a href="" style="margin-top: 20px;"><img src="../../assets/icon/expand-icon.svg" alt="">Change of Address</a>
                  <a href="" style="margin-top: 20px;"><img src="../../assets/icon/po_box.svg" alt="">Rent or Renew PO Box</a>
                  <img src="../../assets/image/go-now (3).png" alt="" style="width: 200px;height: 170px;">
                </li>
                <li>
                  <a href="">Learn About</a>
                  <a href="">Sending
                    <p>Sending Mall</p>
                  </a>
                  <a href="">Online Shipping
                    <p>Ship to USPS Smart Locker</p>
                    <p>Label Broker</p>
                    <p>Ship to USPS Smart Locker</p>
                    <p>Label Broker</p>
                    <p>Ship to USPS Smart Locker</p>
                    <p>Label Broker</p>
                  </a>
                </li>
                <li>
                  <a href="" style="border-bottom:none;">&nbsp</a>
                  <a href="">Mall & Shiping Services
                    <p>priority mail Express</p>
                    <p>priority mail</p>
                  </a>
                  <a href="">Redirecting a Package
                    <p>priority mail</p>
                  </a>
                  <a href="">filing a Claim</a>
                  <a href="">Requesting a Refund</a>
                  <a href="">Money Orders</a>
                  <a href="">filing a Claim</a>
                  <a href="">Requesting a Refund</a>
                </li>
                <input type="text" value="Search or Enter a Tracking Number" style="margin-top: 20px; margin-left: 20px">
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div>
        <el-dropdown placement="bottom"style="width: 100%;">
          <el-button class="svg"@click="go('/store/international')"> International </el-button>
          <template #dropdown>
            <el-dropdown-menu>
               <div class="two1-div"style="width: 800px;height: 445px ;">
                <li>
                  <a href="">Tools</a>
                  <a href=""><img src="../../assets/icon/holdmail.svg" alt="">Hold Mail</a>
                  <a href=""><img src="../../assets/icon/expand-icon.svg" alt="">Change of Address</a>
                  <a href=""><img src="../../assets/icon/po_box.svg" alt="">Rent or Renew PO Box</a>
                  <img src="../../assets/image/go-now (4).png" alt="" style="width: 200px;height: 170px;">
                </li>
                <li>
                  <a href="">Learn About</a>
                  <a href="">Sending
                    <p>Sending Mall</p>
                    <p>Sending Packages</p>
                    <p>Insurace & Extra Services</p>
                    <p>Shiping Restrictions</p>
                    <p>Ship to USPS Smart Locker</p>
                    <p>Label Broker</p>
                  </a>
                  <a href="">Custom Mail, Cards, & Envelopes</a>
                  <a href="">Postage Prices</a>
                </li>
                <li>
                  <a href="" style="border-bottom:none;">&nbsp</a>
                  <a href="">Mall & Shiping Services
                    <p>priority mail Express</p>
                    <p>priority mail</p>
                    <p>USPS Ground Advantage</p>
                    <p>First-Class Mall</p>
                    <p>Millitary & Diplomatic Mali</p>
                  </a>
                  <a href="">Redirecting a Package</a>
                  <a href="">Money Orders</a>
                </li>
                <input type="text" value="Search or Enter a Tracking Number" style="margin-top: 50px; width: 750px; margin-left: 20px;">
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div>
        <el-dropdown placement="bottom"style="width: 100%;">
          <el-button class="svg"@click="go('/store/help')"> Help </el-button>
          <template #dropdown>
            <el-dropdown-menu>
               <div class="help"style="width: 240px;height: 150px ;">
                <li>
                  <a href=""> FAQs</a>
                  <a href=""> Stamps & Supplies</a>
                  <a href="">Look Up a ZIP Code ™</a>
                  <a href=""> Calacute a Price</a>
             </li>

              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div>
        <el-dropdown placement="bottom"style="width: 100%;">
          <el-button class="two3">
          <template #icon>
            <iconSeach></iconSeach>
          </template></el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <div class="two1-div" style="width: 300px;height: 230px;">
                <input type="text" value="Search or Enter a Tracking Number" style="margin-top: 10px; width: 270px; margin-left: 10px;margin-right:10px; border:none;background-color:rgb(237, 237, 237);border-bottom: #333366 solid 2px; border-radius:0px">
                <div class="help"style="width: 240px;height: 150px ;">
                <li>
                  <a href="" style="border: none;"> Stamps & Supplies</a>
                  <a href="" style="margin-left: 20px;margin-top: 5px;">Look Up a ZIP Code ™</a>
                  <a href="" style="margin-left: 20px;margin-top: 5px;"> Calacute a Price</a>
                  <a href="" style="margin-left: 20px;margin-top: 5px;" > Calacute a Price</a>
             </li>
              </div>
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive,ref } from 'vue';
import { routerKey, useRouter } from 'vue-router'
import iconSeach from '../../assets/icon/seache.vue'
import iconEarth from '../../assets/icon/earth.vue'
import iconLocation from '../../assets/icon/location.vue'
import iconPhone from '../../assets/icon/phone.vue'
import iconWalk from '../../assets/icon/walk.vue'
import iconClick from '../../assets/icon/click-n-ship.vue'
import logo from '../../assets/image/logo.vue'

const router=useRouter()

const go=(path)=>{
  router.push(path)
}
</script>

<style scoped>
.img{
  width: 100%;
  height: 100%;
}
  .one{
    height:20px;
    width: 1260px;
    margin: 5px auto;
    /* background-color: rgb(205, 50, 50); */
  }
  .one-box{
    float: right;
    height: 100%;
    /* width: 500px; */
    /* background-color: #333366; */
    display: flex;
    cursor: pointer;
  }
  .icon{
    height: 20px;
    width: 20px;
  }
  .box{
    width: 120px;
    height: 20px;
    font-size: small;
    /* background-color: yellowgreen; */
    line-height: 22px;
    margin: 0;
    display: flex;
  }

.two{
  height: 45px;
  width: 100%;
  /* min-width: 1500px !important; */
  transform: skew(-12deg);
  background-color: rgb(201, 201, 201);
  cursor: pointer;
  /* overflow: hidden; */
}
.two-box{
  width: 1200px;
  min-width: 1200px !important;
  height: 100%;
  margin: 0 auto;
  /* background-color: yellowgreen; */
  display: flex;
  div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* font-size: 15px;
    font-weight: 800; */
  }
  
.logo{
  /* float: left; */
  height: 100%;
  width: 300px;
  /* background-color: #d61515; */
  /* padding-right: 20px; */
}
  .svg{
    /* overflow-wrap: break-word; */
    width: 100%;
    padding: 0 40px;
    /* margin: 0 10px; */
    color: #333366;
    font-size: 15px;
    font-weight: 800;
    border: 0;
  }
  .two2{
    color: #ffffff;
    width: 100%;
    padding:0 20px;
    font-size: 15px;
    font-weight: 800;
  }
  .two2:hover{
    color: #333366;
  }
  .two3{
    left:2px;
    padding: 4px;
    transform: skew(12deg);
    /* background-color: #333366; */
  }
}
.el-button{
  background-color:rgba(255, 0, 0, 0);
  border: 0;
  width: 45px;
  height: 45px;
  margin: 0 ;
  padding: 0;
  border-radius: 0%;
}
.el-button:hover{
  background-color: rgb(228, 231, 233);
}
 .el-dropdown-menu {
   background-color: rgba(0, 180, 30, 0.75)!important;
   border: 0px solid #00487f00 !important;
   border-radius: 0px;
   /* margin: 0; */
   padding: 0;
 }
 :focus-visible {
  outline: none;
}
.two1-div {
  width: 800px;
  height: 800px;
  background-color: rgb(237, 237, 237);
  font-weight: bold;
}
.two1-div li {
  font-size: 13px;
  margin: 10px;
  width:28%;
  color: #333366;
  margin: 0 15px;
  float: left;
}

.two1-div li a:first-child{
  border-bottom: 1px solid grey;
}
.two1-div  li a {
  color: #333366;
  text-decoration: none;
  display: block;
  margin: 13px;
}
.two1-div li a p {
  font-size: 12px;
  margin:  5px 15px;
  font-weight: 400;
}
.two1-div li img {
  width: 30px;
  height: 30px;
  margin-bottom: -10px;
}
.two1-div input {
  width: 500px;
  margin-top: 105px;
  margin-left: 135px;
  background-color: white;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
}

.Quick_Tools {  
    width: 590px;
height: 405px;
    list-style: none; 
    padding: 0;  
    margin: 0;  
    background-color: white;
}  
  
.Quick_Tools ul {  
    list-style: none;
}  
.Quick_Tools li:first-child {
  margin-top: 40px;
}
.Quick_Tools li {  
    float: left;
    width: 75px;
    height: 33.33%; 
    box-sizing: border-box;
    margin: 32px;   
}  
  
.Quick_Tools li a {  
    display: block; 
    text-align: center; 
    text-decoration: none;
    color: #333366;
    font-weight: bold;
    margin-top: 10px;
}  
  
.Quick_Tools li a img {  
    max-width: 100%; 
    height: auto; 
}  
  
.placeholder {
    display: block;  
    visibility: hidden;
}  

.Quick_Tools::after {  
    content: "";  
    display: table;  
    clear: both;  
}

.send {
  width: 800px;
  height: 760px;
  background-color: rgb(237, 237, 237);
  font-weight: bold;
}
.send li {
  font-size: 13px;
  width:28%;
  color: #333366;
  margin: 0 15px;
  float: left;
  
}

.send li a:first-child{
  border-bottom: 1px solid grey;
}
.send  li a {
  color: #333366;
  text-decoration: none;
  display: block;
  margin: 13px;
}
.send li a p {
  font-size: 12px;
  margin:  5px 15px;
  font-weight: 400;
}
.send li img {
  width: 30px;
  height: 30px;
  margin-top: 20px;
  margin-bottom: -10px;
}
.send input {
  width: 500px;
  margin-top: 105px;
  margin-left: 135px;
  background-color: white;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
}






.receive {
  width: 550.34px;
  height: 620px!important;
  background-color: rgb(237, 237, 237);
  font-weight: bold;
}
.receive-li a {
  margin: 30px!important;
  font-size: 15px;
}
.receive li {
  font-size: 13px;
  width:45%;
  color: #333366;
  margin: 0 15px;
  float: left;
}
.receive li a:first-child{
  border-bottom: 1px solid grey;
}
.receive  li a {
  color: #333366;
  text-decoration: none;
  display: block;
  margin: 8px;
}
.receive li a p {
  font-size: 12px;
  margin:  5px 15px;
  font-weight: 400;
}
.receive li img {
  width: 30px;
  height: 30px;
  margin-bottom: -10px;
}
.receive input {

  width: 400px;
  margin-top: 85px;
  margin-left: 90px;

  background-color: white;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
}

.help {
  width: 240px;
  height: 150px;
  background-color: rgb(237, 237, 237);
  font-weight: bold;
}
.help li {
  font-weight: bold;
  font-size: 15px;
  margin: 10px;
  width:auto;
  color: #333366;
  margin: 10px 15px;
  float: left;
}

.help li a {
  color: #333366;
  text-decoration: none;
  display: block;
  margin-top: 10px;
}
</style>